@require "~styl/base/palette.styl"

.alert-box
  clearfix()
  display flex
  width calc(100% - 48px)
  float left
  margin 0 6px 10px
  padding 20px
  border 1px solid $headings-color
  border-radius 5px
  font-family Lato-Regular
  
  &__icon
    flex 0

  &__content
    flex 1
    margin-left 20px

  &__dismiss
    flex 0

  &__title
    font-family Lato-Bold
    padding-right 25px

  &__link
    text-decoration none
    color inherit
    cursor pointer

  &--notification
    color $body-color
    border-color $notification-info-border-color
    background-color $notification-info-fill-color

  &--warning
    color $body-color
    border-color $notification-warning-border-color
    background-color $notification-warning-fill-color

  &--critical
    color $body-color
    border-color $notification-alert-border-color
    background-color $notification-alert-fill-color